<template>
  <div>
    <div id="editor" ref="myEditor"></div>
    <slot></slot>
  </div>
</template>
<script>
import WangEditor from 'wangeditor'
export default {
  name: 'ComponentWangeditor',
  data () {
    return {
      edit: ''
    }
  },
  props: {
    value: {
      type: String,
      default: ''
    },
    config: {
      type: Array,
      default: () => {
        return {}
      }
    },
    uploadConfig: {
      type: Array,
      default: () => {
        return {
          method: 'http', // 支持custom(objurl)和http(服务器)和base64
          url: '/'
        }
      }
    }
  },
  computed: {
    customConfig () {
      return {
        pasteFilterStyle: false, // 关闭掉粘贴样式的过滤
        pasteIgnoreImg: false, // 粘贴时不忽略图片
        showLinkImg: false,
        menus:[          // 菜单配置
          'head',  // 标题
          'bold',  // 粗体
          'fontSize',  // 字号
          'fontName',  // 字体
          'italic',  // 斜体
          'underline',  // 下划线
          'strikeThrough',  // 删除线
          //'foreColor',  // 文字颜色
          //'backColor',  // 背景颜色
          //'link',  // 插入链接
          'list',  // 列表
          'justify',  // 对齐方式
          //'quote',  // 引用
          'emoticon',  // 表情
          'image',  // 插入图片
          // 'table',  // 表格
          // 'code',  // 插入代码
          'undo',  // 撤销
          'redo'  // 重复
        ],
        ...this.config
      }
    }
  },
  watch: {
    value: {
      deep: true,
      handler(val){
        this.editor.txt.html(val)// 生成编辑器
      }
    }

  },
  components: {},
  methods: {
    readBlobAsDataURL (blob, callback) {
      var a = new FileReader()
      a.onload = function (e) { callback(e.target.result) }
      a.readAsDataURL(blob)
    },
    initEditor () {
      var self = this
      this.editor = new WangEditor(this.$refs.myEditor)
      // 配置 onchange 事件
      this.editor.customConfig = this.customConfig
      // 将图片大小限制为 1M  2M的话就写2*1024*1024
      this.editor.customConfig.uploadImgMaxSize = 1 * 1024 * 1024
      //限制一次最多上传 1 张图片
      this.editor.customConfig.uploadImgMaxLength = 1
      this.editor.change = function () { // 编辑区域内容变化时
        self.$emit('input', this.txt.html())
        self.$emit('onchange', this.txt.html(), this.txt)
        // editor.txt.html('.....') //设置编辑器内容
        // editor.txt.clear() //清空编辑器内容
        // editor.txt.append('<p>追加的内容</p>')//继续追加内容。
        // editor.txt.text()  // 读取 text
        // editor.txt.getJSON()  // 获取 JSON 格式的内容
      }
      this.editor.customConfig.customUploadImg = function (files, insert) {
        if (self.uploadConfig.method === 'custom') {
          if (self.uploadConfig.callback) {
            self.uploadConfig.callback(files, insert)
          }
        }
        if (self.uploadConfig.method === 'base64') {
          files.forEach(file => {
            self.readBlobAsDataURL(file, function (dataurl) {
              insert(dataurl)
            })
          })
        }
        if (self.uploadConfig.method === 'http') {
          if (self.uploadConfig.callback) {
            self.uploadConfig.callback(files, insert)
          } else {
            var formData = new FormData()
            files.forEach(file => {
              formData.append('file', file)
            })
            self.$axios.post(self.uploadConfig.url, formData).then(({ data }) => {
              if (data.status === 'success') {
                insert(data.url)
              }
            })
          }
        }
      }

      this.editor.create() // 生成编辑器
      this.editor.txt.text(this.value) // 生成编辑器
      this.$emit('oninit', this.editor)
    }
  },
  beforeCreate () {
  },
  created () {
  },
  beforeMount () {
  },
  mounted () {
    this.initEditor()
  }
}
</script>

<style >
.w-e-toolbar{
  flex-wrap:wrap;
}

</style>